<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/art-template/lib/template-web.js"></script>
    <!-- <script src="/node_modules/axios/lib/axios.js"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>英雄联盟</title>
</head>
<style>
    body {
        background: url('/assets/images/timg1.jpg');
        color: #fff;
        background-size: cover;
    }
</style>
<body>
    <div class="container">
        <h1 class="text-center">英雄联盟<small>编辑英雄</small></h1>
        <!-- 表格部分 -->
        <a href="index.html" class="btn btn-info btn-sm">返回首页</a>
        <hr>
        <form id="formId">

        </form>
    </div>
    <!-- 模板操作的数据 -->
    <script id="tmp" type="text/html">
        <input type="text" name="id" value="{{ id }}" class="hidden">
        <label>姓名:</label>
        <input type="text" class="form-control" name="name" value="{{ name }}"> 
        性别：
        <label>
            <input type="radio" name="gender" value="男" {{gender==='男'?'checked':''}}> 男
        </label>
        <label>
            <input type="radio" name="gender" value="女" {{gender==='女'?'checked':''}}> 女
        </label>
        <div>
            <input type="submit" value="确认修改" class="btn btn-success">
        </div>
    </script>
    <script>
        $(function () {

            // axios.get('http://127.0.0.1:5000/api/getheros')
            //     .then(function (res) {
            //         const htmlStr = template('tmp', res.data)
            //         $("tbody").html(htmlStr)
            //     })
            //     .catch(function (err) {
            //         console.log(err)
            //     })
            const search = new URLSearchParams(location.search)
            // console.log(location)
            const id = search.get('id')
            // 发送ajax 请求。根据id查询英雄信息 
            axios.get('http://127.0.0.1:5000/api/gethero?id=' + id)
                .then(function (res) {
                    if (res.status === 200 && res.data.affectedRows === 1) {
                        // console.log(res.data)
                        // 使用模板渲染引擎
                        const htmlStr = template('tmp', res.data.message)
                        $('#formId').html(htmlStr)
                    }
                })
                .catch(function (err) {
                    console.log(err)
                })

            // 确认修改之后,再次请求提交 
            $('form').on('submit', function (e) {
                e.preventDefault()
                // console.log($(this).serialize())
                // 发送ajax    请求 
                axios.post('http://127.0.0.1:5000/api/updatehero', $(this).serialize())
                    .then(function (res) {
                        // console.log(res)
                        if (res.status === 200 && res.data.affectedRows === 1) {
                            location.href = 'index.html'
                        }
                    })
                    .catch(function (err) {
                        console.log(err)
                    })
            })
        })
    </script>
</body>

</html>